{% load dajaxice_templatetags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Dajax - </title>
    <style type="text/css" media="screen">
    body,html{
        font:12px/1.4em Verdana,sans-serif;
        margin:0; padding:10px; background:#092e20; color:white;
    }
    .bloque{
        float:left;
        width:150px;
        border:solid 2px #89c242;
        -moz-border-raius:6px;
        -webkit-border-radius:6px;
        padding:2px;
        margin:4px;
    }
    .bloque ul{
        list-style-type:none;
        margin:0px;
        padding:0px;
    }
    .bloque ul li{
        border:solid 1px #89c242;
        background:#487858;
        -moz-border-raius:6px;
        -webkit-border-radius:6px;
        padding:4px;
        margin:2px;
    }
    .bloque ul li input{
        width:100%;
    }
    h1{
        color:#89c242;
    }
    
    .red{
        color:red;
    }
    #console{
        position:absolute;
        left:0px;
        width:100%;
        height:150px;
        bottom:0px;
        color:black;
        background:white;
        overflow:scroll;
    }
    </style>
    <script src="http://www.google.com/jsapi"></script>
    <script>
    
    // Load Prototype
    google.load("prototype", "1.6.0.3");
    //google.load("jquery", "1.3.2");
    //google.load("mootools", "1.2.1");
    //google.load("dojo", "1.3.1");
    
    /**
    Callback test
    **/
    
    function my_callback(data){
        alert(data+' received from server');
    }
    
    </script>

<script src="http://xmlhttprequest.googlecode.com/svn/trunk/source/XMLHttpRequest.js" type="text/javascript" charset="utf-8"></script>
    {% dajaxice_js_import %}

<script type="text/javascript" charset="utf-8">
    var Dajax = Class.create();
	Dajax.prototype = {
    
    initialize:function(){},
    process: function(data)
    {
        data.each(function(elem){
            switch(elem.cmd)
            {
                case 'alert':
                    alert(elem.val)
                break;
        
                case 'data':
                    eval( elem.fun+"(elem.val);" );
                break;
        
                case 'as':
                    $$(elem.id).each(function(e){e[elem.prop] = elem.val;});
                break;
        
                case 'addcc':
                    elem.val.each(function(cssclass){
                        $$(elem.id).each(function(e){ e.addClassName(cssclass);});
                    });
                break;
        
                case 'remcc':
                    elem.val.each(function(cssclass){
                        $$(elem.id).each(function(e){ e.removeClassName(cssclass);});
                    });
                break;
        
                case 'ap':
                    $$(elem.id).each(function(e){ e[elem.prop] += elem.val;});
                break;
        
                case 'pp':
                    $$(elem.id).each(function(e){ e[elem.prop] = elem.val + e[elem.prop];});
                break;
        
                case 'clr':
                    $$(elem.id).each(function(e){e[elem.prop] = "";});
                break;
        
                case 'red':
                    window.setTimeout('window.location="'+elem.url+'";',elem.delay);
                break;
        
                case 'js':
                    eval(elem.val);
                break;
        
                case 'rm':
                    $$(elem.id).each(function(e){e.remove();});
                break;
        
                default:
                    alert('Unknown action!');
            }
        });
    }
};

Dajax = new Dajax();
</script>

    </head>

    <body>
        <h1>Dajax</h1>
        <div class="bloque" id="block01">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.assing" onclick="Dajaxice.apiexamples.assign_test('Dajax.process');" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block02">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.clear" onclick="Dajaxice.apiexamples.clear_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block03">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.alert" onclick="Dajaxice.apiexamples.alert_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block04">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li><input type="button" name="" value="dajax.addCSSClass" onclick="Dajaxice.apiexamples.cssadd_test('Dajax.process')" id=""></li>
                <li><input type="button" name="" value="dajax.removeCSSClass" onclick="Dajaxice.apiexamples.cssrem_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block06">
            <ul>
                <li class="row">Element #1</li>
                <li class="row">Element #3</li>
                <li class="row">Element #4</li>
                <li class="row">Element #5</li>
                <li class="row">Element #6</li>
                <li><input type="button" name="" value="dajax.append" onclick="Dajaxice.apiexamples.append_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block07">
            <ul>
                <li class="row">Element #1</li>
                <li class="row">Element #3</li>
                <li class="row">Element #4</li>
                <li class="row">Element #5</li>
                <li class="row">Element #6</li>
                <li><input type="button" name="" value="dajax.prepend" onclick="Dajaxice.apiexamples.prepend_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block08">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.redirect" onclick="Dajaxice.apiexamples.redirect_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block09">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.script" onclick="Dajaxice.apiexamples.script_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block10">
            <ul>
                <li class="row">Element #1</li>
                <li class="row">Element #3</li>
                <li class="row">Element #4</li>
                <li class="row">Element #5</li>
                <li class="row">Element #6</li>
                <li><input type="button" name="" value="dajax.remove" onclick="Dajaxice.apiexamples.remove_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block11">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li>Element #6</li>
                <li><input type="button" name="" value="dajax.addData" onclick="Dajaxice.apiexamples.adddata_test('Dajax.process')" id=""></li>
            </ul>
        </div>
        
        <div class="bloque" id="block12">
            <ul>
                <li>Element #1</li>
                <li>Element #3</li>
                <li>Element #4</li>
                <li>Element #5</li>
                <li><input type="text" name="what" value="Type..." id="what" style="width:95%"></li>
                <li><input type="button" name="" value="Parameters" onclick="Dajaxice.apiexamples.param_test('Dajax.process',{'what':document.getElementById('what').value})" id=""></li>
            </ul>
        </div>
        <div style="clear:both;"></div>
        <div id="console">
            
        </div>
    </body>
</html>
